
<template>
    <div class="tenement_thirteenth">
        <div class="box">
            <div class="left">
                <p>设备的基本信息:</p><br>
                <div class="left_box">
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize">
                        <el-form-item label="设备名称:" prop="name">
                            <el-input v-model="ruleForm.name" />
                        </el-form-item>
                        <el-form-item label="设备编号:" prop="num">
                            <el-input v-model="ruleForm.num" />
                        </el-form-item>
                        <el-form-item label="设备型号:" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="ISS20200816">
                                <el-option label="Zone one" value="shanghai" />
                                <el-option label="Zone two" value="beijing" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="运行时间:" prop="runTime">
                            <el-input v-model="ruleForm.runTime" placeholder="时间" />
                        </el-form-item>
                        <el-form-item label="运行状态:" prop="runRegion">
                            <el-select v-model="ruleForm.runRegion" placeholder="Activity zone">
                                <el-option label="Zone one" value="shanghai" />
                                <el-option label="Zone two" value="beijing" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="&emsp;跟进人:" prop="peopleName">
                            <el-input v-model="ruleForm.peopleName" />
                        </el-form-item>
                        <el-form-item label="联系方式:" prop="method">
                            <el-input v-model="ruleForm.method" />
                        </el-form-item>

                    </el-form>
                </div>
            </div>
            <div class="right">
                <p>设备的基本信息:</p><br>
                <div class="right_box">
                    <div class="map">
                        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize"
                            label-position="letf" style="width: 250px;">
                            <el-form-item label="安装位置:" prop="position">
                                <el-input v-model="ruleForm.position" />
                                <!-- <el-icon :size="20"> -->
                                <el-icon size="28" class="maap">
                                    <Location />
                                </el-icon>
                                <!-- </el-icon> -->
                            </el-form-item>
                        </el-form>
                    </div>
                    <!-- 地图 -->
                    <div class="let_box">
                        <div id="bie_map">
                        </div>
                        <!-- 右边 -->
                        <el-form-item label="&emsp;&emsp;&emsp;设备名称:" prop = "name">

                        </el-form-item>
                        <el-upload class="avatar-uploader"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </div>
            </div>
        </div>
        <div class="btns">
            <el-button type="primary" size="large" @click="addList">保存</el-button>
            <el-button size="large"><span class="quxiao">取消</span></el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import * as service from '../../api/wc';

const formSize:any = ref('default')
const ruleFormRef:any = ref()
var handleAvatarSuccess = ()=>{}
var beforeAvatarUpload = ()=>{}
var imageUrl = ref();
const ruleForm:any = reactive({
    name: '',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const rules:any = reactive({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})
const {BMapGL} = window as any;
//地图
onMounted(() => {
    var map = new BMapGL.Map("bie_map");
    //设置坐标
    var point = new BMapGL.Point(116.404, 39.915);
    //地图实例化
    map.centerAndZoom(point, 8);
})

// 新增列表
var addList:any = async ()=>{
     var res = await service.alarm_add({ 
        'createTime': "2023-04-08 07:12:20",
        'pushMode': "string",
        'ruleId': 0,
        'ruleName': "string",
        'warnClass': 0,
        'warnRule': "string",
        'warnType': "string",
        'warnUser': "string"
        })
     console.log(res);
}
</script>


<style scoped>
.tenement_thirteenth {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 15px;
    position: absolute;
    top: 50px;
    right: -50px;
    z-index: 999;

}

.tenement_thirteenth .box {
    width: 100%;
    height: 100%;
    /* background: lawngreen; */
    display: flex;
    padding: 50px;
}

.tenement_thirteenth .box .left {}

.tenement_thirteenth .box .left_box {
    padding: 40px;
    padding-left: 70px;
    width: 500px;
    height: 550px;
    border: 1px solid black;
    border-radius: 15px;
}

.tenement_thirteenth .box .right_box {
    margin-left: 30px;
    padding: 40px;
    width: 900px;
    height: 550px;
    border: 1px solid black;
    border-radius: 15px;
    /* display: flex; */
}

/* .tenement_thirteenth .box .right .right_box {
  display: flex;
} */

.tenement_thirteenth .box .right p {
    margin-left: 40px;
}

p {
    font-size: 18px;

}

avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

:deep(.el-form-item__label) {
    font-size: 18px;
}

:deep(.el-input__inner) {
    width: 240px;
    height: 40px;
    /* border-radius: 25%; */
}

.map {
    position: relative;
    /* background: red; */
}

.map .maap {
    position: absolute;
    left: 275px;
}

.tenement_thirteenth .box .right #bie_map {
    height: 90%;
    width: 60%;
}

.tenement_thirteenth .box .right .let_box {
    display: flex;
    height: 100%;

}

.avatar-uploader {
    border: 1px solid black;
    height: 180px;
    width: 180px;
}

.tenement_thirteenth .btns {
    /* background: red; */
    margin-top: -100px;
    margin-left: 600px;
}
</style>
